<template>
    <div class="film">
        <ul>
            <li v-for="item in nowList">
                <router-link :to="{name:'detail',params:{'id':item.id}}">
                    <div class="img"><img :src="item.poster.thumbnail" ></div>
                    <div class="introduction">
                        <div class="filmname">
                                <div class="title">{{item.name}}</div>
                                <div class="go"><span class="fen">{{item.grade}}</span> &gt;</div>
                        </div>
                        <p>{{item.intro}}</p> 
                        <div class="num">
                            <span class="time"><span class="shu date">{{item.cinemaCount}}</span>家影院上映&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
                            <span class="ticket"><span class="shu count">{{item.watchCount}}</span>人购票</span>
                        </div>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    import $ from 'jquery';
    export default{
        data:function(){
            return{                
                nowList:[],
            }
        },  
        mounted:function(){
            var self=this;
            // ajax请求得到正在热映影片
            var num=1;
            function getData(){
                $.get('http://localhost:3000/now?num='+num,function(res){
                    var list=res.data.films;
                    for(var i=0;i<list.length;i++){
                        self.nowList.push(list[i]);
                    }
                })	
            } 
            getData();  
            $(window).scroll(function(){
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(this).height();
                //当文档的高度小于或者等于总的高度的时候，开始动态加载数据 
                if (scrollTop + windowHeight >= scrollHeight){
                    num++;                    
                    getData();
                }
            })	      
        }
    }
</script>

<style scoped>
    ul,li{
        list-style:none;
    }
    .film li>a{
        display:block;
        width: 100%;
        padding: 0.2rem 0;
        border-bottom: dashed 1px #c9c9c9;
        overflow: hidden;
    }
    .film li>a .img{
        width: 0.6rem;
        float: left;
    }
    .film li>a .img img{
        width:100%;
    }
    .film li>a .introduction{
        float:left;
        padding-left: 0.15rem;
        width: 75%;
    }
    .film li>a .introduction .filmname{
        font-size: 0.16rem;
        line-height: 0.32rem;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .introduction .filmname .title{
        float:left;
    }
    .introduction .filmname .go{
        float:right;
        font-family:cursive;
        font-size:0.14rem;
        color:#c6c6c6;
    }
    .introduction .filmname .go .fen{        
        font-size:0.16rem;
        color: #fc7103;
    }
    .introduction p{
        height: 0.24rem;
        line-height: 0.24rem;
        color: #8e8e8e;
        font-size: 0.12rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
    }
    .introduction div.num{
        line-height: 0.24rem;
        color: #8e8e8e;
        font-size: 0.12rem;
    }
    .introduction div.num .shu{
        color: #8aa2bf;
    }
</style>